<template>
  <div class="fml-loading-box">
    <div class="fml-loading">
      <div class="sk-cube1 fml-loading-div"></div>
      <div class="fml-loading-div2 fml-loading-div"></div>
      <div class="fml-loading-div4 fml-loading-div"></div>
      <div class="fml-loading-div3 fml-loading-div"></div>
    </div>
    <p>加载中，请稍后...</p>
  </div>
</template>
<style lang="scss" scoped>
.fml-loading-box {
  width: 130px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -65px;
  text-align: center;
  .fml-loading {
    margin: 40px auto;
    width: 40px;
    height: 40px;
    position: relative;
    transform: rotateZ(45deg);
    .fml-loading-div {
      float: left;
      width: 50%;
      height: 50%;
      position: relative;
      transform: scale(1.1);
    }
    .fml-loading-div:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #4875e0;
      animation: sk-foldCubeAngle 2.4s infinite linear both;
      transform-origin: 100% 100%;
    }
    .fml-loading-div2 {
      transform: scale(1.1) rotateZ(90deg);
    }
    .fml-loading-div3 {
      transform: scale(1.1) rotateZ(180deg);
    }
    .fml-loading-div4 {
      transform: scale(1.1) rotateZ(270deg);
    }
    .fml-loading-div2:before {
      background-color: #eb2828;
      animation-delay: 0.3s;
    }
    .fml-loading-div3:before {
      background-color: #ffba00;
      animation-delay: 0.6s;
    }
    .fml-loading-div4:before {
      background-color: #67c23a;
      animation-delay: 0.9s;
    }
  }
}
@keyframes sk-foldCubeAngle {
  0%,
  10% {
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}
</style>

